<template>
  <div class="app-container">
    <Layout v-if="isLoggedIn">
      <router-view v-slot="{ Component }">
        <transition name="el-zoom-in-center" mode="out-in" :duration="200">
          <keep-alive :include="['Home','Personal','Goods','Purchase','Sales','Stock','Employee',]">
            <component :is="Component"></component>
          </keep-alive>
        </transition>
      </router-view>
    </Layout> 
    <Login v-else/>  
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import Layout from './views/Layout.vue';
import Login from './views/Login.vue';
import { useUserStore } from '@/stores/user';
 
const userStore = useUserStore()
const isLoggedIn = ref(userStore.isLoggedIn)
// 监听用户状态变化
userStore.$subscribe(() => {
  isLoggedIn.value = userStore.isLoggedIn
})
</script>

<style scoped>
.app-container {
  height: 100vh;
  margin: 0; 
  display: flex;
  flex-direction: column;
}
</style>
